<template>
  <div class="importBtn">
    <el-upload
      :action="action"
      :on-success="onSuccess"
      :headers="headers"
      :show-file-list="false"
      accept=".csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
      :data="{ ...params, status }"
    >
      <el-button class="btn">{{ $t('lang.operate.import') }}</el-button>
    </el-upload>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { getToken } from '@/utils/auth'
import { ElMessage } from 'element-plus'

export default defineComponent({
  props: {
    action: {
      type: String,
      required: true,
    },
    updateData: {
      type: Function as PropType<(...args: any) => void>,
      required: true,
    },
    status: {
      type: String as PropType<'0' | '1'>,
      required: true,
       default: '0',
    },
    params: {
      type: Object,
      required: false,
      default: () => ({}),
    },
  },
  setup(props) {
    return {
      onSuccess: ({ msg, code }) => {
        if (code !== 200) {
          ElMessage.error(msg)
        } else {
          ElMessage({
            message: '导入成功',
            type: 'success',
          })
          props.updateData()
        }
      },
      headers: {
        Authorization: 'Bearer ' + getToken(),
      },
    }
  },
})
</script>
<style lang="scss" scoped>
.importBtn {
  display: inline-block;
  margin: 0 10px;
}
</style>
